<template>
  <div class="hello-ezuikit-js" style="height: 500px;">
    <div id="video-container" style="width:100%;height: 500px;">
      <div class="mask" @click="togglePlay" :style="{ 'display': play ? 'none' : 'block' }">
      </div>
    </div>
    <div class="controll">
      <div class="left">
        <el-tooltip effect="dark" :content="play ? '正在播放' : '停止'">
          <i :class="play ? 'el-icon-video-pause' : 'el-icon-video-play'" @click="togglePlay"></i>
        </el-tooltip>
        <el-tooltip effect="dark" content="视频截图">
          <i class="el-icon-camera" @click="isCapturePicture"></i>
        </el-tooltip>
        <el-tooltip effect="dark" :content="enableZ ? '电子放大-已开启' : '电子放大-已关闭'">
          <i :class="enableZ ? 'el-icon-zoom-out' : 'el-icon-zoom-in'" @click="toggleZoom"></i>
        </el-tooltip>
      </div>
      <div class="right">
        <el-tooltip effect="dark" content="全屏">
          <i class="el-icon-full-screen" @click="isFullScreen"></i>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
import EZUIKit from "ezuikit-js";

export default {
  name: "EZUIKitJs",
  props: [ "videoToken", "videoUrl" ],
  data(){
    return {
      player: null,
      enableZ:false, //默认关闭电子放大
      play: false //默认停止播放
    }
  },
  mounted(){
    this.player =  new EZUIKit.EZUIKitPlayer({
      autoplay: false,
      id: "video-container",
      accessToken: this.videoToken,
      // ezopen://open.ys7.com/${设备序列号}/{通道号}.live
      url: this.videoUrl, // 播放地址
      // url: "ezopen://open.ys7.com/F84497482/14.rec", // 播放地址
      template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
      audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
      width: 660,
      height: 500
    });
  },
  beforeDestroy(){
    if(this.play)this.player.stop();
  },
  methods:{
    // 开启/关闭 电子放大
    toggleZoom(){
      if(!this.player || !this.play) return;
      switch (this.enableZ) {
        case true:
          this.player.closeZoom();
          this.enableZ = false;
          break;
        case false:
          this.player.enableZoom();
          this.enableZ = true;
          break;
        default:
          break;
      }
    },
    // 播放/停止 监控
    togglePlay(){
      if(!this.player) return;
      switch (this.play) {
        case true:
          this.player.stop();
          this.play = false;
          break;
        case false:
          this.player.play();
          this.play = true;
          break;
        default:
          break;
      }
    },
    // 视频截图
    isCapturePicture(){
      if(!this.player || !this.play) return;
      this.player.capturePicture();
    },
    // 全屏
    isFullScreen(){
      if(!this.player || !this.play) return;
      this.player.fullScreen();
    }
  }
};
</script>
<style scoped>
#video-container{
  position: relative;
}
::v-deep #video-container iframe{
  width: 100% !important;
}
.controll {
  display: flex;
  position: absolute;
  bottom: 100px;
  left: 4px;
  width: 660px;
  height: 48px;
  line-height: 48px;
  background: rgba(0, 0, 0, 0.65);
  padding: 0 15px;
  z-index: 2;
  opacity: 0;
  transition: all 0.3s;
}
.controll .left{
    width: 50%;
}
.controll .lefti{
  margin-right: 10px;
}
.controll .right{
  width: 50%;
  text-align: right;
}
.controll i{
  vertical-align: middle;
  color: #fff;
  font-size: 30px;
}

#video-container:hover .controll{
  opacity: 0.65;
}
</style>
